<template>
  <div class="container">
    <div class="toolbar">
      <input
        type="file"
        class="choose"
        @change="loadExcelFile"
        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
      />
      <el-button @click="exportJson">导出JSON</el-button>
      <el-button @click="exportExcel">导出xlsx</el-button>
    </div>
    <Sheet
      ref="Sheet"
      SheetName="Sheet1"
      :ExportJsonProperties="JsonProperties"
      :File="file"
      :Headers="headers"
      :ColumnWidth="200"
      :Records="records"
      @loaded="loaded"
      @maxTableLength="maxTableLength"
      @cell-selected="cellSelected"
    ></Sheet>
  </div>
</template>

<script>
import Sheet from "./SpreadSheet.vue";
export default {
  components: { Sheet },
  data() {
    return {
      file: null,
      headers: [],
      workbookData: [],
      records: [],
      // 定义导出的Json结构
      JsonProperties: [
        "Index",
        "OrderNo",
        "ProductName",
        "ProductStatus",
        "PlanQuantity",
        "RealQuantity",
        "Unit",
        "StartDate",
        "EndDate",
        "MixTank",
        "TK101Rate",
        "TK101Quantity",
        "TK102Rate",
        "TK102Quantity",
        "TK103Rate",
        "TK103Quantity",
        "TK104Rate",
        "TK104Quantity",
        "TK108Rate",
        "TK108Quantity",
        "TK109Rate",
        "TK109Quantity",
        "Additive1",
        "Additive2",
      ],
    };
  },
  mounted() {},
  methods: {
    maxTableLength(obj) {
      console.log("obj", obj);

      this.ColumnCount = obj.maxColsProps;
      this.RowCount = obj.maxRowsProps;
    },
    loadExcelFile(e) {
      console.log("loadExcelFile", e.target.files[0]);
      this.file = e.target.files[0];
      this.fileName = this.file.name;
    },
    exportJson() {
      let json = this.$refs.Sheet.exportJson();
      console.log(json);
    },
    exportExcel() {
      this.$refs.Sheet.exportExcel(this.fileName || "模板名称");
    },
    loaded(workbookData) {
      console.log("loaded", workbookData);
      this.workbookData = workbookData;
    },
    cellSelected(cell, ri, ci) {
      // xs.data.addStyle("highlight", {
      //   background: "#ff0000",
      //   color: "#ffffff",
      // });
      // cell.style = "highlight";
      console.log("cellSelected", cell, ri, ci, xs, this.workbookData);

      xs.datas.forEach((row) => {
        console.log("row", row.styles[cell.style]);
        //cell中的style由序号表示,一个序号对应一个样式rows.styles[序号]表示单元格实际样式
        this.$set(row.styles, cell.style, {
          border: {
            top: ["thin", "#000000"],
            bottom: ["thin", "#000000"],
            left: ["thin", "#000000"],
            right: ["thin", "#000000"],
          },
          //黄色
          bgcolor: "#ffff00",
        });
        xs.reRender();
      });

      // cell.addClass("highlight");
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: calc(100vh - 85px);
  display: flex;
  flex-direction: column;
  .toolbar {
    width: 100%;
    height: 50px;
  }
  .grid {
    width: 100%;
    height: calc(100%);
  }
  /deep/ .x-spreadsheet-toolbar {
    padding: 0px;
    width: calc(100% - 2px) !important;
  }
}
.choose::-webkit-file-upload-button {
  color: white;
  display: inline-block;
  background: #409eff;
  border: none;
  padding: 12px 20px;
  width: 100px;
  height: 40px;
  border-radius: 3px;
  white-space: nowrap;
  cursor: pointer;
  font-size: 10pt;
}
</style>
